<template>
  <div class="home">
    <div class="wrap">
      <ul>
        <li class="first">
          <router-link to="/hot">推荐</router-link>
        </li>
        <li>
          <router-link to="/paihang">排行榜</router-link>
        </li>
        <li><router-link to="/gedan">歌单</router-link></li>
        <li>
          <router-link to="/diantai">主播电台</router-link>
        </li>
        <li>
          <router-link to="/singer">歌手</router-link>
        </li>
        <li>
          <router-link to="/newsing">新碟上架</router-link>
        </li>
      </ul>
    </div>
  </div>
  <router-view></router-view>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  components: {},
};
</script>
<style lang="less">
.first {
  position: relative;
}
.first::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #c20c0c;
  top: -10px;
  left: 37px;
  transform: rotate(45deg);
}
.home {
  height: 35px;
  background-color: #c20c0c;
  ul {
    display: flex;
    margin-left: 180px;
    height: 32px;
    align-items: center;
    li {
      a {
        height: 20px;
        padding: 0 13px;
        margin: 7px 17px 0;
        border-radius: 20px;
        line-height: 21px;
        &.router-link-exact-active {
          background: #9b0909;
        }
      }
    }
  }
}
</style>